<template>
	<view class="income">
		<view class="card">
			<view class="top flex_center">
				<view class="money_box">
					<view>{{commission.store_price || '0.00'}}</view>
					<text>余额(元)</text>
				</view>
				<view class="money_box">
					<view>{{commission.store_commission || 0}}%</view>
					<text>当前佣金比</text>
				</view>
			</view>
			<view class="bottom flex_center">
				<view class="money_box" @click="$util.toUrl('/pages/store/income/already')">
					<view>
						{{commission.withdrawn || 0}}单 <text>({{commission.use_withdrawal_price || '0.00'}}元)</text>
					</view>
					<text>已结算订单</text>
				</view>
				<view class="money_box" @click="$util.toUrl('/pages/store/income/never')">
					<view>
						{{commission.can_withdrawa_num || 0}}单
						<text>({{commission.can_withdrawal_price || '0.00'}}元)</text>
					</view>
					<text>未结算订单</text>
				</view>
			</view>
			<view class="btn" @click="$util.toUrl('/pages/store/income/never')">
				去提现
			</view>
		</view>
		
		<view class="serial" v-if="list.length">
			<view class="title">收入明细</view>
			<view class="list flex_r_between" v-for="(item,index) in list" :key="index">
				<view class="left flex_center">
					<image src="/static/store/wallet_list_icon.png"></image>
					<view class="list_text">
						<view class="list_title hidden">{{item.name}}</view>
						<view class="list_time">订单编号:{{item.order_sn}}</view>
						<view class="list_time">下单时间:{{item.create_time}}</view>
					</view>
				</view>
				
				<view class="right">
					+ {{item.store_price}}
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				commission: {},
				
				page:1,
				total: 0,
				list: [],
			}
		},
		methods: {
			getCommission() {
				this.$get('/user_withdrawal/commission').then(res => {
					this.commission = res.data;
				})
			},
			
			refresh(){
				this.$get('/user_withdrawal/commission').then(res => {
					this.commission = res.data;
				});
				
				this.page = 1;
				this.$get('/store.store/getTransactionSerial',{
					page: this.page,
				}).then(res=>{
					this.list = [];
					this.total = res.data.total;
					this.list.push(...res.data.data);
					uni.stopPullDownRefresh();
				})
			},
			
			getList(){
				this.$get('/store.store/getTransactionSerial',{
					page: this.page,
				}).then(res=>{
					this.total = res.data.total;
					this.list.push(...res.data.data)
				})
			},
			getMore(){
				if(this.total > this.list.length){
					this.page++;
					this.$get('/store.store/getTransactionSerial',{
						page: this.page,
					}).then(res=>{
						this.total = res.data.total;
						this.list.push(...res.data.data)
					})
				}
			},
		},

		created() {
			this.getCommission();
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.income {
		padding: 0 32rpx;
	}

	.card {
		height: 340rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/store/wallet_bg.png) 0 0 no-repeat;
		background-size: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 0 0 0 40rpx;
		position: relative;
		overflow: hidden;

		.money_box {
			flex: 1;
		}

		.top {
			height: 50%;
			.money_box {
				view {
					font-weight: 600;
					font-size: 48rpx;
					color: #FFFFFF;
				}

				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.bottom {
			height: 50%;
			.money_box {
				view {
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;

					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.btn {
			background: url(https://qiniu-cdn.maeiyun.com//h5static/store/wallets_btn.png) 0 0 no-repeat;
			background-size: 100%;
			width: 144rpx;
			height: 48rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			position: absolute;
			top: 30rpx;
			right: 0;
		}
	}

	.serial {
		margin-top: 32rpx;
		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			margin-bottom: 32rpx;
		}
		
		.list {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 32rpx;
			margin-bottom: 20rpx;
			.left {
				flex: 1;
				overflow: hidden;
				
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 32rpx;
				}
				
				.list_text {
					flex: 1;
					overflow: hidden;
					.list_title {
						font-size: 28rpx;
						color: #333333;
					}
					.list_time {
						font-size: 24rpx;
						margin-top: 4rpx;
						color: #999999;
					}
				}
			}
			
			.right {
				font-weight: 600;
				font-size: 28rpx;
				color: #672F08;
				margin-left: 20rpx;
			}
		}
	}
	

</style>